<template>
	<view>
		<!-- 外层循环，遍历 monthList -->
		<view class="order-list" v-for="(one, index) in monthList" :key="index">
			<view class="month">
				<text>{{ one.month }}</text>
				<image src="../../static/order_list/calendar-icon.png" mode="widthFix"></image>
			</view>
			<!-- 内层循环，遍历 one.orders -->
			<view class="order" v-for="(order, idx) in one.orders" :key="order.orderNo"
				@tap="viewOrderHandle(order.orderNo)">
				<view class="top">
					<view class="date">{{ order.acceptTime }}</view>
					<view class="amount-status">
						<text class="amount"
							v-if="order.hasOwnProperty('realOrderAmount')">￥{{ order.realOrderAmount }}</text>
						<text :class="order.status">{{ statusMap[order.status] }}</text>
					</view>
				</view>
				<view class="content">
					<view class="from">
						<text>{{ order.startPlace }}</text>
					</view>
					<view class="to">
						<text>{{ order.endPlace }}</text>
					</view>
					<view class="desc">
						<text>订单编号：{{ order.orderNo }}</text>
					</view>
				</view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	let dayjs = require('dayjs');
	export default {
		data() {
			return {
				monthList: [],
				page: 1,
				length: 50,
				isLastPage: false,
				orders: [],
				// 定义状态映射对象
				statusMap: {
					0: '等待接单',
					1: '已接单',
					2: '司机已到达',
					3: '开始代驾',
					4: '结束代驾',
					5: '司机确认费用',
					6: '未付款',
					7: '已付款',
					8: '订单已结束',
					9: '顾客撤单',
					10: '司机撤单',
					11: '事故关闭',
					12: '其他'
				}
			};
		},
		methods: {
			loadList() {
				const _this = this;
				const param = {
					page: this.page,
					rows: 50
				}
				_this.post("/order/app/order/driver/list", param, (res) => {
					if (res.success) {
						_this.monthList = res.data;
					}
				});
			},
			viewOrderHandle(orderNo) {
				uni.navigateTo({
					url: "/order/order/order?orderNo=" + orderNo
				})
			},
		},
		onShow: function() {
			this.loadList();
		},
	};
</script>

<style lang="less">
	@import url('order_list.less');
</style>